<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>模板设计</title>

    <link rel='stylesheet' href='luckysheet/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='luckysheet/plugins/plugins.css' />
    <link rel='stylesheet' href='luckysheet/css/luckysheet.css' />
    <link rel='stylesheet' href='luckysheet/assets/iconfont/iconfont.css' />
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<div>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span style="color: red;font-size: large;">*</span>&nbsp;模板名称：</label>
              <div class="layui-input-block">
                <input type="text" id="templeteName" placeholder="请输入模板名称" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit="" lay-filter="saveTemplete">保存模板</button>
            </div>
          </div>
          <hr class="layui-bg-green" style="margin-left:10px;width: 95%">
    </form>
</div>

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:96%;height:87%;"></div>

<script src="layui/layui.js"></script>
<script src="luckysheet/plugins/js/plugin.js"></script>
<script src="luckysheet/luckysheet.umd.js"></script>
<script src="fill/fill.common.js"></script>
<script src="fill/fill.plugins.js"></script>
<script src="fill/fill.sheet.js"></script>

<script>

    $(function () {
        luckysheet.create(optionsTemplete);
        $("#expends").html(expendPlugins);
        initPluginsSelect(null);
        layui.use(['form','layer'], function(){
            let form = layui.form,
            layer = layui.layer;

            //监听提交
            form.on('submit(saveTemplete)', function(data){
                let params = {
                    "templeteName": $('#templeteName').val(),
                    "templeteContent": luckysheet.getAllSheets(),
                    "templeteCellrelation": cellrelations,
                    "templeteProtect": protectCellData
                };
                $.ajax({
                    url: getUrl("/report/templetedesign/add"),
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(params),
                    dataType: "json",
                    timeout: 10000,
                    headers: {'Authorization': authorization},
                    success: function (data) {
                        if(data.code==='200') {
                           layer.msg(data.msg, {icon: 1});
                        }else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error: function (data) {
                        //停止延时动画
                        let statusText = data.statusText;
                        let status = data.status;
                        if (statusText == "timeout") {
                            layer.msg("请求超时，请稍后再试！", {icon: 5});
                        } else {
                            if (status == undefined || status == null || status.length == 0) {
                                layer.msg("网络异常，请稍后再试！(-1)", {icon: 5});
                            } else {
                                layer.msg("网络异常，请稍后再试！(" + status + ")", {icon: 5});
                            }
                        }
                    }
                });
                return false;
            });
        });
    });

    function popMask(){
        layer.open({
            type: 1,
            area: ['500px', '300px'],
            content: $('#expends') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }

</script>
</body>

<div id="extendPlugins" style="margin-top: 3px;">
    <div class="layui-form">
        <div id="pluginsSelect" style="display: none;" class="layui-form-item">
            <label class="layui-form-label">选择插件：</label>
            <div class="layui-input-block" style="width: 200px;">
                <select id="selectedPlugins" lay-filter="showSelectedPlugin">
                </select>
            </div>
            <hr class="layui-bg-green" style="margin-left:10px;width: 95%">
        </div>
    </div>
    <div id="expends" class="layui-form"></div>
</div>

<div id="protectForm" style="margin-top: 35px;">
    <div class="layui-form">
        <div id="proCellSelect" style="display: none;" class="layui-form-item">
            <label class="layui-form-label">选择单元格</label>
            <div class="layui-input-block" style="width: 240px;">
                <input id="protectCellId" type="text" placeholder="请选择受保护单元格" class="layui-input">
            </div>
        </div>
    </div>
</div>

<div id="selectFile">
    <div class="layui-form">
        <div id="cellFileSelect" style="display: none;" class="layui-form-item">
            <div class="layui-upload-drag" id="test10" style="margin-top: 40px;margin-left: 100px;">
                <i class="layui-icon"></i>
                <p>点击选择上传文件</p>
            </div>
            <div id="uploadDemoView" style="display: none;margin-top: 5px;margin-left: 100px;">
                <span id="filename"></span>
            </div>
            <div style="margin-top: 5px;margin-left: 140px;">
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        </div>
    </div>
</div>

</html>